<template>
  <div class="allBox">
    <div class="webPageTitle">菜单管理</div>
    <div class="leftTitle">
      <div class="dataTitle">菜单信息表</div>
      <div style="float: right;width: 280px" class="myFromBox" title="尽请期待">
        <Input v-model="selectText" disabled>
        <Button slot="append" icon="ios-search" disabled></Button>
        </Input>
      </div>
    </div>
    <div style="float: left;width: 100%;">
      <Table highlight-row  :loading="loading" :columns="tableColumns" :data="tableData" ></Table>
    </div>
    <div  class="pageBox" >
      <!--添加-->
      <template>
        <Button type="primary" @click="insertBottom = true" style="float: left;margin-left: 5.5%">添加</Button>
        <Modal
          v-model="insertBottom"
          title="添加"
          @on-ok="insertData()"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">标题：</p>
          <Input v-model="addTitle" size="large" ></Input>
          <p style="margin-top: 10px;font-size: 14px">地址（url）：</p>
          <Input v-if="levelType ==2"  v-model="addUrl" type="text" size="large" ></Input>
          <Input v-if="levelType ==1"  value="暂无"  type="text" size="large" disabled></Input>
          <p style="margin-top: 10px;font-size: 14px">请选择级别：</p>
          <RadioGroup v-model="levelType" >
            <Radio label="1" ><span>一级</span></Radio>
            <Radio label="2"><span>二级</span></Radio>
          </RadioGroup>
          <br>
          <div v-if="levelType ==2">
            <p style="margin-top: 10px;font-size: 14px">请选择所属父级：</p>
            <Select v-model="addTopLevel" style="width:200px;margin-top: 10px">
              <Option v-for="item in oneLevelData" :value="item.id" :key="item.id">{{ item.title }}</Option>
            </Select>
          </div>
        </Modal>
      </template>
      <!--配置权限-->
      <template>
        <Button type="info" @click="conRtPop = true" style="float: left;margin-left: 5px">配置角色权限</Button>
        <Modal
          v-model="conRtPop"
          title="配置角色权限"
          @on-ok="rtData"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">请选择角色：</p>
          <RadioGroup v-model="rtRole"  @on-change="testRadio">
            <Radio label="0" ><span>系统用户</span></Radio>
            <Radio label="1"><span>运营人员</span></Radio>
            <Radio label="2"><span>席位商</span></Radio>
            <Radio label="3"><span>财务人员</span></Radio>
            <Radio label="4"><span>预留</span></Radio>
            <Radio label="5"><span>普通用户</span></Radio>
          </RadioGroup>
          <p style="font-size: 14px;margin-top: 10px">请配置权限：</p>
          <CheckboxGroup v-model="rtMenu">
            <Checkbox style="width: 30%"  v-for="(rootTime,index) in allRoots" :key="index"  :label="rootTime.id" >{{rootTime.title}}</Checkbox>
          </CheckboxGroup>
        </Modal>
      </template>
      <!--修改-->
      <template>
        <Modal
          v-model="updateShow"
          title="更新菜单信息"
          @on-ok="updateDate"
          @on-cancel="">
          <p style="margin-top: 10px;font-size: 14px">所属ID：{{newData.id}}</p>
          <p style="margin-top: 10px;font-size: 14px">标题：</p>
          <Input v-model="newData.title" size="large" ></Input>
          <p style="margin-top: 10px;font-size: 14px">地址（url）：</p>
          <Input v-model="newData.url" type="text" size="large" ></Input>
          <p style="margin-top: 10px;font-size: 14px">请选择级别：</p>
          <RadioGroup v-model="optionLevel" >
            <Radio label="1" ><span>一级</span></Radio>
            <Radio label="2"><span>二级</span></Radio>
          </RadioGroup>
          <br>
          <div v-if="optionLevel == 2">
            <p style="margin-top: 10px;font-size: 14px">请选择所属父级：</p>
            <Select  v-model="newLeCen" style="width:200px;margin-top: 10px">
              <Option v-for="item in oneLevelData" :value="item.id" :key="item.id">{{ item.title }}</Option>
            </Select>
          </div>

        </Modal>
      </template>
      <!--读取API错误-->
      <template>
        <Modal v-model="redAPIModal" width="360">
          <p slot="header" style="color:#f60;text-align:left">
            <Icon type="information-circled"></Icon>
            <span>{{redAPIModalTit}}</span>
          </p>
          <div style="text-align:left">
            <p>错误信息：</p>
            <p>{{redAPIModalCen}}</p>
          </div>
          <div slot="footer">
            <Button type="error" size="large" long  @click="redAPIModalFun">确定</Button>
          </div>
        </Modal>

      </template>


      <Page :total="total" :page-size="rows" show-total @on-change="selectData" class="pageStyle"></Page>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        optionLevel:1,
        conRtPop:false,
        updateShow:false,
        levelType:1,                                               //选择的值
        insertBottom: false,                                       //添加控制按钮
        selectText:'',                                             //要查询的字段
        tableData:[],
        tableColumns:[
          {title:'ID',key:'id',align: 'center'},
          {title:'标题名称',key:'title',align: 'center'},
          {title:'路由地址',key:'url',align: 'center'},
          {title:'一级菜单',key:'topLevel',align: 'center'},
          {title:'二级菜单',key:'level',align: 'center'},
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showupdate(params.row)
                    }
                  }
                }, '修改'),
              ]);
            }
          }
        ],                                        //表构造
        oneLevelData:[],                                                 //数据
        /*分页*/
        status:'',                                                  //状态
        rows:10,                                                     //每页条数
        total:0,                                                  //总数量
        loading:true,                                              //表单数据加载时
        /*查询数据*/
        oneLevel:'',
        newLeCen:'1',
        /*修改数据*/
        newData:[],
        /*添加数据*/
        insertUrl:'/menu/add',                                                //添加地址
        addTitle:'',
        addUrl:'',
        addLevel:'0',
        addTopLevel:'',
        /*  角色权限列表*/
        rtUpdateUrl:'/menu/role/update',
        rtRole:0,    //角色id
        rtMenu:[],    //权限数组
        allRoots:[],
        aaa:'',
        redAPIModal:false,
        redAPIModalTit:'',
        redAPIModalCen:''
      }
    },
    methods:{
      /*角色选中改变时*/
      testRadio:function () {
          var  _self = this;
          _self.$http.get(_self.service + "/menu/roleMenu",{params:{
            roleId:_self.rtRole
          }}).then(function(res){
            if(res.data.code == "001"){
              var roots = res.data.result.data;
              for(var i in roots ){
                roots[i]=parseInt(roots[i])
              }
              _self.rtMenu = roots
            }else{
              _self.modalFun('读取角色所有权限错误',res.data.msg)
            }
          })
      },
      /*读取数据*/
      selectData: function (page) {
        this.aaa = page
        var _self = this;
        _self.$http.post(_self.service +'/menu/subslist',{
            page:page,
            rows:_self.rows
        }).then(function (res) {
          if(res.data.code == '001'){
            var datas =  res.data.result.data;
            for(var i =0;i<datas.length;i++){
              if(datas[i].url =="")
                  datas[i].url = '暂无'
                }
            _self.tableData = datas;
            _self.total = res.data.result.total
            _self.loading = false;
            _self.selectLevel()
          }else{
            _self.modalFun('读取货币信息错误',res.data.msg)
          }
        })
      },
      /*查询所有一级菜单*/
      selectLevel:function () {
        var _self = this;
        _self.$http.post(_self.service+'/menu/toplist')
          .then(function (res) {
            if(res.data.code == '001'){
              var levelData = res.data.result.data;
              _self.oneLevelData = levelData;
            }else{
              _self.modalFun('查询所有一级菜单错误',res.data.msg)
            }
          })
      },
      /*查询所有子菜单*/
      selcetSon:function () {
        var _self = this;
        _self.$http.post(_self.service + '/menu/subs/list')
          .then(function (res) {
              if(res.data.code == '001'){
                _self.allRoots = res.data.result.data;
              }else{
                _self.modalFun('查询所有子菜单错误',res.data.msg)
              }
          })
      },
     /*打开修改信息pop*/
     showupdate:function (obj) {
       this.updateShow = true;
       this.newData = obj;
     },
      /*修改数据*/
      updateDate: function () {
        var _self = this;
        var testUrl =_self.newData.url
        if(testUrl.replace(/(^\s*)|(\s*$)/g, "" ) == ''){
          this.$Notice.warning({
            title:"路由地址为必填！"
          })
          _self.selectData(_self.aaa);
          return
        }
        if(this.optionLevel == 1){
          _self.newData.level = 1;
          _self.newData.topLevel = 0
        }else if(this.optionLevel == 2){
          _self.newData.level = 2;
          _self.newData.topLevel= _self.newLeCen
        }
        _self.$http.post(_self.service +'/menu/update',{
          id:_self.newData.id,
          title:_self.newData.title,
          url:_self.newData.url,
          level:_self.newData.level,
          topLevel:_self.newData.topLevel
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Notice.success({
              title:"名为：<span style='color: green'>"+_self.newData.title + "</span> 的菜单修改成功！",
            });
            _self.selectData(_self.aaa);
          }else{
            /*_self.$Notice.error({
              title: "修改失败！",
            });*/
            _self.modalFun('修改菜单信息错误',res.data.msg)
            _self.selectData(_self.aaa);

          }
        })
      },
      /*角色权限设置*/
      rtData:function () {
        var _self = this;
        var rtm = _self.rtMenu;
        rtm = "[" +rtm.join(",")+"]";
        _self.$http.post(_self.service + _self.rtUpdateUrl,{
          menuId:rtm,
          roleId:_self.rtRole
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success(res.data.msg)
            _self.selectData(_self.aaa);
          }else{
            _self.modalFun('设置角色权限错误',res.data.msg)
          }
        })
      },
      /*添加数据*/
      insertData:function () {
         var _self = this;
        if(_self.addTitle.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
          this.$Message.warning('标题不能为空！')
          return
        }
        if(_self.levelType == 1 ){
          _self.addTopLevel= 0;
          _self.addLevel = 1
        }else {
          _self.addLevel = 2
        }
        _self.$http.post(_self.service + _self.insertUrl,{
            title:_self.addTitle,
            url:_self.addUrl,
            level:_self.addLevel,
            topLevel: _self.addTopLevel
        }).then(function (res) {
          if(res.data.code == '001'){
            _self.$Message.success("添加成功！");
            _self.addTitle='';_self.addUrl = '';_self.addLevel='0',_self.addTopLevel=0;
            _self.selectData(_self.aaa);
            _self.selcetSon();

          }else{
            _self.modalFun('添加菜单信息错误',res.data.msg)
          }
        })
      },
      /*获取浏览器高度对 table的 row 显示进行数量控制 */
      tableRowH:function(){
        var _self = this;
        var winHeight = document.documentElement.clientHeight;
        _self.rows = Math.floor((winHeight - (40+50+50+100))/52);
      },
      /*Modal弹出层*/
      modalFun:function (modTit,modCen) {
        this.redAPIModal = true;
        this.redAPIModalTit = modTit;
        this.redAPIModalCen = modCen;
      },
      redAPIModalFun:function () {
        this.redAPIModal = false
      },
    },
    created:function(){
      this.tableRowH();
      this.selectData('1');
      this.selcetSon();
      this.testRadio()
    },

  }
</script>
<style>

  .pageBox{
    float: left;
    width: 100%;
    margin-top: 10px
  }
  .pageStyle{
    float: right;
    margin-right: 20px
  }
</style>
